<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <div class="row text-center">
        <div class="col-md-12 text-center">
            <h1>Requirejs 组件库</h1>
            <p>Markdown实时渲染</p>
            <p><a href="index.html" class="btn btn-success">返回上一页</a></p>
        </div>
    </div>
</div>
<div class="container">
    <div class="row row-span-3">
        <div class="col-md-12">
            <div id="edit"></div>
        </div>
        <div class="col-md-12 mt-3 text-center">
            <button class="btn btn-primary" id="get-markdown">获取markdown</button>
            <button class="btn btn-primary" id="get-html">获取html</button>
            <p class="mt-2" style="color: red">头都：有些地方有点不太会用，如果有会用的小伙伴可以帮我完善下</p>
            <p>doc: <a href="https://ld246.com/article/1549638745630#options-upload">文档地址</a></p>
        </div>
    </div>
</div>

<script src="js/require.js"></script>
<script src="js/main.js"></script>
<script>
    // 鼠标特效 + bootstrap
    requirejs(["cursor",'bootstrap4']);

    requirejs(["vditor","layer"],function (Vditor) {
        vditor = new Vditor('edit', {
            width: 'auto',
            height: 500, //'auto'
            preview:{
                toc: true,
            },

            outline: true,
            value: "OrangBus",
            counter:{
                enable:true,
                after(){
                    layer.msg("临时保存成功！");
                }
            },
            upload:{
                // 返回格式
        // {
        //     "msg": "",
        //     "code": 0,
        //     "data": {
        //     "errFiles": ['filename', 'filename2'],
        //         "succMap": {
        //         "filename3": "filepath3",
        //             "filename3": "filepath3"
        //     }
        // }
        // }
                // multiple:false, //是否允许多图上传，不管单复还是多图，上传的都是一个数组
               url: 'http://heimei.dev.com/index/Demo/upload',
                resize:{
                   enable: true,
                },
                linkToImgFormat(responseText){
                    console.log("对图片地址上传的返回值进行格式化")
                    console.log(responseText)
                },
                format(files,responseText){
                   console.log("格式处理")
                   console.log(files,responseText)
                },
                linkToImgCallback(responseText){
                   console.log("图片地址上传回调")
                   console.log(responseText)
                },
               success(HTMLPreElement,msg){
                   console.log("上传成功")
                   msg = JSON.parse(msg);
                   console.log(HTMLPreElement,msg)
               },
               error(msg){
                   console.log("上传失败")
                   console.log(msg)
                }
            }
        })

        console.log(vditor)
        //获取 Markdown 内容
        // let markdown = vditor.getValue();
        // console.log(markdown)
        // // 获取 HTML 内容
        // let html = vditor.getHTML();
        // console.log(html)

        $("#get-markdown").click(function () {
            let markdown = vditor.getValue();
            console.log(markdown)
        })
        $("#get-html").click(function () {
            let markdown = vditor.getHTML();
            console.log(markdown)
        })
    });
</script>
</body>
</html>